<template>
<div class="xyt-dialog" v-if="show">
  <van-overlay :show="show" @click="closeOverlay" />
  <div class="xyt-dialog__body" :class="`xyt-dialog__body--${position}`">
    <img src="../assets/img/attention-ewm.png" alt="">
  </div>
</div>
</template>
<script setup>
import { ref, defineEmits } from 'vue';

const show = ref(false)
function open() {
  show.value = true
}
function close() {
  show.value = false
}
defineExpose({
  open,
  close
})
const emit = defineEmits(['close'])
const props = defineProps({
  position: {
    type: String,
    default: 'center',
  },
  overlay: {
    default: true,
    type: Boolean
  }
})

function closeOverlay() {
  if (props.overlay) {
    show.value = false
  }
}

function closeDialog() {
  show.value = false
  emit('close')
}
</script>
<style scoped lang="scss">
.xyt-dialog {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.xyt-dialog__body {
  position: relative;
  z-index: 101;
  margin: 0 30px;
  border-radius: 8px;
  padding: 8px;
  &--top {
    margin-top: 100px;
  }
  &--center {
    position: absolute;
    left: 30px;
    right: 30px;
    top: 50%;
    transform: translate(0, -50%);
    min-height: 200px;
  }
  img {
    width: 100%;
  }
}
.xyt-dialog-close {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 24px;
  color: #fff;
  border-radius: 50%;
  border: 1px solid #fff;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 24px;
}
</style>